<template>
  <div>
    <el-breadcrumb separator="/" style="height:30px">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="personbox-card">
      <el-table ref="multipleTable" :data="pi.list" tooltip-effect="dark" style="width: 100%">
        <el-table-column label="头像" width="120">
          <template slot-scope="scope">
            <el-avatar :size="50" :src="scope.row.avatar_url"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="nick_name" label="用户名" width="120"></el-table-column>
        <el-table-column prop="gender" label="性别" width="120"></el-table-column>
        <el-table-column label="籍贯" show-overflow-tooltip>
          <template
            slot-scope="scope"
          >{{scope.row.country}}-{{scope.row.province}}-{{scope.row.city}}</template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="warning" @click="openPersonDetail(scope.row.p_id)">详情</el-button>
            <el-button type="danger" @click="deletePersonByPid(scope.row.p_id)">删除</el-button>
            <el-button type="success" @click="navTo(scope.row.p_id)">看过的新闻</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pi.pageNum"
        :page-sizes="[2, 5, 10, 15,20]"
        :page-size="pi.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pi.total"
      ></el-pagination>
      <br />
    </el-card>
    <el-dialog :title="person.nick_name+'的详细信息'" :visible.sync="dialogVisible" width="30%">
      <div class="toolbar">
        <div>
          <el-avatar :size="100" :src="person.avatar_url"></el-avatar>
          <!-- <el-image :src="personDetail.avatar_url"></el-image> -->
          <span class="hao">用户名 : {{person.nick_name}}</span>
        </div>
        <div>
          <!-- <div class="title">身体数据</div> -->
          <div class="content">
            <div class="list">
              <div class="row">
                <div class="title">性别</div>
                <div class="right">
                  <div class="tis" v-text="person.gender"></div>
                </div>
              </div>
              <div class="row">
                <div class="title">国籍</div>
                <div class="right">
                  <div class="tis" v-text="person.country"></div>
                </div>
              </div>
              <div class="row">
                <div class="title">省份</div>
                <div class="right">
                  <div class="tis" v-text="person.province"></div>
                </div>
              </div>
              <div class="row">
                <div class="title">城市</div>
                <div class="right">
                  <div class="tis" v-text="person.city"></div>
                </div>
              </div>
              <div class="row">
                <div class="title">语言</div>
                <div class="right">
                  <div class="tis" v-text="person.language"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">知 道 了</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { selectPersonPage, selectPersonDetail,deletePersonByPid } from "../../api";
export default {
  data() {
    return {
      dialogVisible: false,
      pi: {},
      person: {},
      queryInfo: {
        pageNum: 1,
        pageSize: 5,
        nick_name: "",
        gender: "",
        city: ""
      }
    };
  },
  created() {
    this.selectPersonPageFu();
  },
  methods: {
    /** 删除用户 */
    deletePersonByPid(pid) {
      this.$confirm("此操作将永久删除用户, 是否继续?", "提示", {
        type: "warning"
      })
        .then(async () => {
          let { data } = await deletePersonByPid(pid);
          if (data.code == 1) {
            this.$message.success(data.msg);
            this.selectPersonPageFu();
          } else {
            this.$message.error(data.msg);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    /**用户详情 */
    async openPersonDetail(pid) {
      let { data } = await selectPersonDetail(pid);
      this.person = data.data;
      this.dialogVisible = true;
    },
    /**查询所有用户数据 (条件+分页)*/
    async selectPersonPageFu() {
      let { data } = await selectPersonPage(this.queryInfo);
      this.pi = data.data;
    },
    /**跳转页面 */
    navTo(p_id) {
      this.$router.push("/personJournalismList?p_id=" + p_id);
    },
    handleSizeChange(val) {
      this.queryInfo.pageSize = val;
      this.selectPersonPageFu();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.queryInfo.pageNum = val;
      this.selectPersonPageFu();
      console.log(`当前页: ${val}`);
    }
  }
};
</script>

<style scoped>
.toolbar {
  width: 92%;
  margin: 0 4% 0 4%;
  padding: 0 0 20px 0;
  background-color: #fff;
  box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
}
.title {
  margin: 0 0 0 3%;
  display: flex;
  align-items: center;
}
.content {
  padding-bottom: 20px;
}
.list {
  width: 96%;
  padding-left: 4%;
  background-color: #fff;
}
.row {
  widows: 100%;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: solid 1px #eee;
}
.title {
  font-size: 18px;
  color: #333;
}
.right {
  display: flex;
  align-items: center;
  color: #999;
}
.tis {
  font-size: 15px;
  margin-right: 5px;
  max-height: 120px;
}
image {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  margin: 10px 0;
}
</style>